<template>
  <el-drawer v-model="visible" :title="title" :direction="direction" :size="size" :with-header="false"
    :append-to-body="appendToBody" :close-on-click-modal="closeOnClickModal" :destroy-on-close="destroyOnClose"
    v-bind="$attrs" @close="onCancel">
    <template #header>
      <div class="crud-drawer__header">
        <div class="crud-drawer__title">
          <slot name="title">{{ title }}</slot>
        </div>
        <div class="crud-drawer__actions">
          <slot name="header-actions" />
        </div>
      </div>
    </template>

    <div class="crud-drawer__body">
      <slot />
    </div>

    <template v-if="$slots.footer" #footer>
      <slot name="footer" />
    </template>
    <template v-else-if="showFooter" #footer>
      <div class="crud-drawer__footer">
        <CrudButton type="delete" size="small" :disabled="loading" @click="onCancel">{{ cancelText }}</CrudButton>
        <CrudButton type="add" size="small" :loading="loading" @click="onConfirm">{{ confirmText }}</CrudButton>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue'

type DrawerDirection = 'rtl' | 'ltr' | 'ttb' | 'btt'

interface Props {
  modelValue: boolean
  title?: string
  size?: number | string
  direction?: DrawerDirection
  appendToBody?: boolean
  closeOnClickModal?: boolean
  destroyOnClose?: boolean
  cancelText?: string
  confirmText?: string
  loading?: boolean
  showFooter?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: '详情',
  size: '40%',
  direction: 'rtl',
  appendToBody: true,
  closeOnClickModal: false,
  destroyOnClose: true,
  cancelText: '取消',
  confirmText: '确认',
  loading: false,
  showFooter: true
})

const emit = defineEmits<{
  (e: 'update:modelValue', v: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
}>()

const visible = ref<boolean>(props.modelValue)

watch(
  () => props.modelValue,
  v => (visible.value = v)
)

watch(visible, v => emit('update:modelValue', v))

const onConfirm = () => {
  emit('confirm')
  visible.value = false
}

const onCancel = () => {
  emit('cancel')
  visible.value = false
}

defineOptions({ inheritAttrs: false })
</script>

<style scoped lang="scss">
.crud-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.crud-drawer__title {
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.crud-drawer__body {
  padding: 16px;
}

.crud-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--el-border-color-light);
  background: var(--el-fill-color-lighter);
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .crud-drawer__header {
    border-bottom-color: $border-color-light-dark;
    background: $bg-color-card-dark;
  }

  .crud-drawer__title {
    color: $text-color-primary-dark;
  }

  .crud-drawer__body {
    background: $bg-color-card-dark;
    color: $text-color-primary-dark;
  }

  .crud-drawer__footer {
    border-top-color: $border-color-light-dark;
    background: $bg-color-gray-dark;
  }
}
</style>

<style scoped lang="scss">
// 深色模式下 Drawer 容器背景
:deep(.el-drawer) {
  @media (prefers-color-scheme: dark) {
    background-color: $bg-color-card-dark;
  }
}
</style>

<style lang="scss">
/* 优先使用 prefers-color-scheme，如果你有项目级 dark theme 也可用 .theme-dark 之类的选择器 */
@media (prefers-color-scheme: dark) {

  /* Drawer 外层容器（Element Plus 的结构） */
  .el-drawer,
  .el-drawer__wrapper,
  .el-drawer__body,
  .el-drawer__header,
  .el-drawer__footer {
    /* 使用你的深色变量（确保这些 SCSS 变量在全局可用） */
    background-color: $bg-color-card-dark !important;
    color: $text-color-primary-dark !important;
  }

  /* header/footer 的边线 */
  .el-drawer__header {
    border-bottom-color: $border-color-light-dark !important;
    background-color: $bg-color-card-dark !important;
  }

  .el-drawer__footer {
    border-top-color: $border-color-light-dark !important;
    background-color: $bg-color-gray-dark !important;
  }

  /* 如果需要更细粒度：覆盖 title 文字颜色、按钮颜色等 */
  .el-drawer__header .crud-drawer__title {
    color: $text-color-primary-dark !important;
  }

  /* 覆盖默认的遮罩（若需要） */
  .el-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
}

/* 如果你希望兼容一个手动切换的主题类（项目里常见），也可以同时支持： */
:root[data-theme='dark'] {

  .el-drawer,
  .el-drawer__wrapper,
  .el-drawer__body,
  .el-drawer__header,
  .el-drawer__footer {
    background-color: $bg-color-card-dark !important;
    color: $text-color-primary-dark !important;
  }

  .el-drawer__header {
    border-bottom-color: $border-color-light-dark !important;
  }

  .el-drawer__footer {
    border-top-color: $border-color-light-dark !important;
  }
}
</style>
